<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Blogs add</title>
    <script th:src="@{/js/axios.js}"></script>
    <script th:src="@{/js/vue.js}"></script>
    <link rel="stylesheet" th:href="@{/js/el/theme-chalk/index.css}">
    <script th:src="@{/js/el/index.js}"></script>
    <script th:src="@{/js/wangEditor.js}"></script>
</head>
<body>
    <div id="app">
        <el-container style="height:1000px;" >
            <el-header style="height:7%;padding: 0px;">
                <div th:include="~{common/head-fore::headFore}">

                </div>
            </el-header>
            <el-container>
                <el-main>
                    <p>
                        标题: <input v-model="title" />&nbsp;&nbsp;&nbsp;&nbsp;
                        类型:
                        <el-select v-model="typeValue" filterable
                                   allow-create
                                   default-first-option placeholder="请选择" style="width:20%;">
                            <el-option v-for="item in types" :key="item.id" :label="item.name"
                                       :value="item.id">
                            </el-option>
                        </el-select>
                    </p>
                    <br>
                    <br>
                    <br>
                    <br>
                    <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
                    <div ref="editor"  class="editor">

                    </div>
                    <hr>
                    <el-button @click="blogAdd()">提交</el-button>
                    <hr>
                </el-main>
            </el-container>
        </el-container>

    </div>
</body>
    <script>
        new Vue({
            el:"#app",
            data(){
                return{
                    title:"",
                    editor:null,
                    typeValue:[],
                    types:{}
                }
            },
            methods:{
                goIndex(){
                    window.location.href="/api/public/goIndex"
                },
                userClick(item){
                    if(item == "my"){
                        window.location.href="/api/user/goUserInfo"
                    }
                    if(item == "addBlog"){
                        window.location.href="/api/blogs/goAdd"
                    }
                    if(item == "loginOut"){
                        axios.get("/logout").then(
                            function (resp) {
                                window.location.href=resp.data.action
                            }
                        )
                    }
                },
                click(item){
                    // console.log(item)
                    if(item == "index"){
                        window.location.href="/api/public/goIndex"
                    }
                    if(item == "info"){
                        window.location.href="/api/user/goUserInfo"
                    }
                },
                init(){
                    var E = window.wangEditor;
                    this.editor = new E(this.$refs.editor);
                    this.editor.config.uploadImgShowBase64 = true
                    // 图片上传格式
                    // 隐藏网络图片, 把图片转成 base 64
                    this.editor.config.pasteFilterStyle = false
                    // 自定义颜色
                    this.editor.config.colors = ['#000000', '#eeece0', '#1c487f', '#4d80bf', '#c24f4a', '#8baa4a', '#7b5ba1', '#46acc8', '#f9963b', '#ffffff']
                    // 配置字体
                    this.editor.config.fontNames = ['宋体', '微软雅黑', 'Arial', 'Tahoma', 'Verdana']
                    //创建
                    this.editor.create();
                    // 富文本内容
                    this.editor.txt.html();
                },
                blogAdd(){
                    // console.log(this.typeValue)
                    // console.log(this.title)
                    var that =this
                    var sum  = 0
                    for(var i in this.types){
                        var n = 0
                        if(this.types[i].id == this.typeValue){
                             sum = 1;
                        }
                    }
                    if(sum == 0) {
                        axios.post("/api/type/add", {name: this.typeValue}).then(
                            function (resp) {
                                that.add(resp.data.data.id)
                            }
                        )
                    }
                   if(sum != 0){
                        this.add(this.typeValue)
                   }
                },
                add(typeid){
                    var that =this
                    var obj1 = {title:this.title,hits:0,
                        body:this.editor.txt.html(),
                        text:this.editor.txt.text(),
                        typeid:typeid}
                    axios.post("/api/blogs/add",obj1).then(
                        function (resp) {
                            that.$message({
                                message: '添加成功',
                                type: 'success',
                                duration:3000,
                                showClose:true
                            });
                        }
                    )
                }
            },
            mounted(){
                this.init()
                var that = this
                axios.get("/api/type/findAll").then(
                    function (resp) {
                        that.types = resp.data.data
                    }
                )
            }
        })
    </script>
</html>